<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="直播人">
          <a-input placeholder="请输入直播人"
                   v-decorator="['userNickName', {rules:[{required: true, message: '请输入直播人姓名'}]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="直播标题">
          <a-input placeholder="请输入直播标题" v-decorator="['mainTitle', {rules:[{required: true, message: '请输入直播标题'}]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="封面图">
          <j-image-upload class="avatar-uploader" text="上传"
                          v-decorator="['coverUrl', {rules:[{required: true, message: '请上传封面图'}]}]"></j-image-upload>
        </a-form-item>
        <a-form-item v-if="liveUrl"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     label="直播地址">
          <a-input readOnly v-model="liveUrl"></a-input>
          <a-button @click="copy">一键复制</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import {postAction} from "@/api/manage";

  export default {
    name: 'LiveInfoModal',
    data() {
      return {
        title: '新增直播',
        visible: false,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          liveStatus: {rules: [{required: true, message: '请输入直播状态 0：直播中 1：直播未开始 2：直播结束 3：直播强制终止!'}]}
        },
        url: {
          add: '/live/liveInfo/add',
          edit: '/live/liveInfo/edit'
        },
        liveUrl: undefined
      }
    },
    methods: {
      add() {
        this.edit({})
      },
      edit() {
        this.form.resetFields();
        this.liveUrl = undefined;
        this.visible = true;
      },
      close() {
        this.$emit('close');
        this.visible = false
      },
      copy() {
        const input = document.createElement('input');
        document.body.appendChild(input);
        input.setAttribute('value', this.liveUrl);
        input.select();
        if (document.execCommand('copy')) {
          document.execCommand('copy');
          this.$message.success('已复制到剪切板')
        }
        document.body.removeChild(input);
      },
      handleOk() {
        if (this.liveUrl) {
          return;
        }
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            postAction('live/liveInfo/addManuLive', values).then(res => {
              if (res.success) {
                this.$message.success('添加成功');
                this.liveUrl = res.result;
              } else {
                this.$message.error(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
            })
          }
        })
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
